القاعات

محتويات الفولدر Halls

// Halls Folder Content
HallsRequest.tsx;
useHalls.ts;
HallsView.tsx;

HallsRequest.tsx

import { TFunction } from "i18next";
import * as z from "zod";

export const schema = (t: TFunction) =>
  z.object({
    name: z
      .string({ required_error: t("pages.halls.inputs.name.errors.required") })
      .min(1, t("pages.halls.inputs.name.errors.min")),
  });
export type HallsRequestType = z.infer<ReturnType<typeof schema>>;

• هنا راح تلكة السكيما الخاصة بالقاعات والي هنا بس الاسم وبيه Validation خاصة بالانبوت مالتة

---

useHalls.ts

// Get Request
export const useHallsQuery = () => {
  return useQuery<Hall[]>({
    queryKey: ["halls"],
    queryFn: () => getHalls(),
  });
};
const {
  data: halls,
  isLoading,
  isError: hallsFetchError,
  isSuccess: hallsFetchSuccess,
} = useHallsQuery();

• هاي راح تجيب القاعات كلها مالتي وياها States تخص نجاح او فشل جلب البيانات

// add new hall
const createHall = useMutation({
  mutationFn: addHall,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["halls"],
      refetchType: "active",
    });
    setOpenDialog(false);
    reset(defaultValues);
    toast.success(
      t("successMessage", {
        description: t("pages.halls.successMessages.added"),
      })
    );
  },
  onError: (error: any) => {
    if (axios.isAxiosError(error)) {
      const errorMessage = error.response?.data?.message || "Unknown error";
      console.log("errorMessage", errorMessage);
      toast.error(errorMessage);
    } else {
      console.error("Unexpected error", error);
    }
  },
});

• دالة علمود تضيف قاعة جديدة وراح تسوي Refetch من جديد ويتخزن بالكاش النتيجة الجديدة وبنفس الوقت يكنسل Dialog الاضافة ويعرض رسالة
• اذا ما نجحت العملية هم يرجع رسالة

const updateHall = useMutation({
  mutationFn: editHall,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["halls"],
      refetchType: "active",
    });
    setSelectedHall(null);
    setOpenDialog(false);
    reset(defaultValues);
    toast.success(
      t("successMessage", {
        description: t("pages.halls.successMessages.update"),
      })
    );
  },
  onError: (error: any) => {
    toast.error(t("errorMessage"), {
      description: error?.response?.data?.errors[0].message,
    });
    console.error("error while editing hall", error);
  },
});
//  حدث او ضيف بناء على هل المستخدم اختار قاعة ام لا
const onSubmit = (data: HallsRequestType) => {
  if (selectedHall) {
    updateHall.mutate({ id: selectedHall, name: data.name });
  } else {
    createHall.mutate(data);
  }
};

• هنا عندي دالتين همة :

  • onSubmit : هاي الدالة راح تجيك اذا اليوزر اختار قاعة اذا روح حدثلي القاعة , واذا ما اختار قاعة يعني كاعد يدخل وحدة جديدة وبهاي الحالة سوي POST
  • updateHall : هاي الدالة مشابهة للي قبلها بس الفرق هنا اني عندي تحديث للقاعة , بس همينة راح يسوي نفس الاكشن مال القبلها اذا نجح او فشل

ملاحظة : عملية الحذف ايضا نفس الشي بس الفرق راح ادز القاعة المختارة المعرف مالتها وبس هاهية الباقي نفس الشي نفس الفوكانيات

---

HallsView.tsx

هاي هنا راح اجيب الدوال الي موجودة بال Custom Hook وراح يتم استخدامها بالView (ال UI) وهذا جزء منة

<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mt-4">
  {halls?.map((hall) => (
    <div
      className="flex flex-col cursor-pointer gap-6 border rounded-lg p-8 shadow-md outline outline-secondary hover:outline-primary transition-all duration-300 "
      key={hall.id}
    >
      <div className="flex justify-between items-center">
        <h2 className="text-2xl">{hall.name}</h2>
        <div className="flex gap-2">
          <Button
            variant={"secondary"}
            onClick={() => openEditHallDialog(hall.id)}
          >
            <Pencil className="h-4 w-4" />
          </Button>
          <Button onClick={() => openDeleteHallDialog(hall.id)}>
            <Trash className="h-4 w-4" />
          </Button>
        </div>
      </div>
      <p>
        {t("pages.halls.tableCount")}: {hall.tables.length}
      </p>
    </div>
  ))}
</div>

طبعا دايما صفحة ال View هي خاصة بس بعرض المحتوى واغلب اللوجك معزول لهذا راح تلكة الشرح بيها اقل شي .